<template>
<div>
  <div class="submit-box head-line">
    <div class="card-shadow">
      <navigator url="/pages/editAddr/main" class="addr-box flex-box weui-cell weui-cell_access">
        <div class="flex-1">
          <div class="flex-box align-start">
            <div class="name-box">
              <p class="name ellipsis">{{addressData.name}}</p>
              <p class="flag" v-if="addressData.default">默认</p>
            </div>
            <div class="flex-1">
              <div class="tel">{{addressData.tel}}</div>
              <div class="addr">{{addressData.address}}</div>
            </div>
          </div>
        </div>
        <div class="weui-cell__ft_in-access"></div>
      </navigator>
    </div>
    <div class="card-shadow">
      <view class="weui-cell weui-cell_select">
        <view class="weui-cell__hd">
          <view class="weui-label">开荒类型</view>
        </view>
        <view class="weui-cell__bd">
          <picker :value="assartTypeArr" :range="assartTypeArr" @change="assartTypeChange">
            <view class="weui-select text-right">{{assartTypeArr[assartIndex]}}</view>
          </picker>
        </view>
      </view>
    </div>
    <div class="card-shadow">
      <view class="weui-cell weui-cell_select">
        <view class="weui-cell__hd">
          <view class="weui-label">服务类型</view>
        </view>
        <view class="weui-cell__bd">
          <picker :value="serviceIndex" :range="serviceTypeArr" @change="serviceTypeChange">
            <view class="weui-select text-right">{{serviceTypeArr[serviceIndex]}}</view>
          </picker>
        </view>
      </view>
    </div>
    <div class="card-shadow weui-cell weui-cell_select">
      <view class="weui-cell__hd">
        <view class="weui-label">服务日期</view>
      </view>
      <view class="weui-cell__bd">
        <picker
          mode="date"
          :vaule="date"
          :start="startDate"
          @change="dateChange"
        >
          <view class="weui-select text-right">{{date}}</view>
        </picker>
      </view>
    </div>
    <div class="card-shadow">
      <div url="/pages/selectDate/main" class="weui-cell area-box">
        <view class="weui-cell__hd">
          <view class="weui-label">开荒面积</view>
        </view>
        <view class="weui-cell__bd">
          <input class="flex-box" name="area" v-model="area" type="text" placeholder="请填写建筑面积">
        </view>
        <div class="weui-cell__ft">
          <i>平方米（m²）</i>
        </div>
      </div>
    </div>
    <div class="card-shadow">
      <view class="weui-cell">
        <view class="weui-cell__bd">
          <textarea class="weui-textarea" placeholder="如有其它需求请在此填写备注"/>
          <view class="weui-textarea-counter">0/200</view>
        </view>
      </view>
    </div>

  </div>
  <div class="btn-box flex-box fiexd">
    <div class="total-box flex-1">合计：<i class="total-price inline">￥8000</i><p class="muted inline">起</p></div>
    <button class="btn-full" form-type="submit">提交预约</button>
  </div>
</div>
</template>
<script>
import dateUtil from '@/utils/dateUtil'
export default {
  components: { },
  data () {
    const today = dateUtil.format(new Date())
    return {
      addressData: {
        name: '周先生',
        tel: '13353646474',
        address: 'd大萨达撒客户端卡实打实的地撒大家阿萨斯柯达',
        default: true
      },
      assartIndex: 0,
      assartTypeArr: [ '粗开', '精开' ],
      serviceIndex: 0,
      serviceTypeArr: [ '新居开荒', '企业办公区开荒', '商铺开荒', '厂房开荒', '其他开荒' ],
      area: '',
      startDate: today,
      date: today
    }
  },
  computed: {},
  methods: {
    assartTypeChange (e) {
      this.assartType = e.mp.detail.value
    },
    serviceTypeChange (e) {
      this.serviceType = e.mp.detail.value
    },
    dateChange (e) {
      this.date = e.mp.detail.value
    }
  }
}
</script>
<style lang="less">
page {
  background-color: #f9f9f9;
}
.submit-box {
  margin-bottom: 50px;
  .card-shadow {
    margin-bottom: 15px;
  }
  .weui-cell.addr-box {
    background-color: #fefcf3;
    padding: 21px 14px;
    .align-start {
      align-items: flex-start;
    }
    .name-box {
      min-width: 60px;
      .name {
        font-size: 15px;
        color: #000;
      }
      .flag {
        display: inline-block;
        color: rgb(250, 75, 112);
        font-size: 12px;
        line-height: 1;
        padding: 3px 5px;
        border-radius: 4px;
        border: 1rpx solid;
        margin-top: 15px;
      }
    }
    .tel {
      font-size: 16px;
      color: #333;
      margin-bottom: 10px;
      font-weight: 500;
    }
    .addr {
      font-size: 14px;
      line-height: 21px;
      color: #888;
      width: 210px;
    }
  }
  .weui-cell {
    background-color: #fff;
    padding: 7px 0;
    &.area-box{
      padding: 15px 0;
    }
    .weui-cell__hd {
      font-size: 15px;
      padding-left: 15px;
    }
    .weui-cell__bd {
      font-size: 14px;
      color: #888;
    }
    .weui-cell__ft{
      font-size: 14px;
      color: #333;
    }
    .weui-label{
      width: 70px;
    }
    input, input:focus{ 
      height: 20px;
      min-height: 20px;
      line-height: 20px;
    }
    textarea {
      box-sizing: border-box;
      width: 100%;
      font-size: 15px;
      height: 116px;
      padding: 14px 20px;
      line-height: 38px;
    }
  }
}
.btn-box {
  font-size: 14px;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
  line-height: 50px;
  .total-box{
    border-top: 1px solid #dfdfdf;
    padding-left: 15px;
    .total-price{
      color: #fa4b70;
      font-size: 18px;
    }
  }
  .btn-full{
    width: 110px;
    line-height: 50px;;
    padding: 0;
  }
}
</style>